//import JSResource from './JSResource';
import {loadQuery, useRelayEnvironment} from 'react-relay/hooks';
import {Environment} from "relay-runtime";
import {useContext} from "react";
import {UserContext} from "./routing/UserContext";
//import RelayEnvironment from './RelayEnvironment';
import loadable from '@loadable/component'
//import  testSecondRouter  from './test/SecondRouter';
import  deviceSecondRouter  from './device/SecondRouter';
import  unitSecondRouter  from './unit/SecondRouter';
import  taskSecondRouter  from './task/SecondRouter';
import  inspectSecondRouter  from './inspect/SecondRouter';
import  searchSecondRouter  from './search/SecondRouter';
import  reportSecondRouter  from './report/SecondRouter';
import  pipelineSecondRouter  from './pipeline/SecondRouter';
import  maintenanceSecondRouter  from './maintenance/SecondRouter';
import  agreementSecondRouter  from './agreement/SecondRouter';
import  requestSecondRouter  from './request/SecondRouter';
import  aideSecondRouter  from './aide/SecondRouter';

//嵌套路由的，这里只有一个顶级路路由点Root。
//下面代表routes[]嵌套层层的{目前两个路由的/ ;/issue/:id'}。
//下层次路由想要执行到达，必然的其上面层级的路由也必须执行代码的prepare准备数据?。
//回首页HomeRootIssuesQuery 以及 query RootQuery(两个都会触发，实际两次http请求包的。 loadQuery实际就是单独立刻请求的。
//后续地点击一条进入详情页面/issue/:id就不会再次取数据RootQuery;


/** 顶级路由配置： []顶级只能一条？？
 从react-router-config来的要求的routes必须是数组[];
 //路由特点：每一级层次都要留下render();
 //下面这个数组[{}] 顶级不能配置多个的！！
 //解决办法：每个顶级路由都必须经过一个点【查询这个用户是谁】。
 //路由注入组件，只能用URI的路径作为参数。 没配置prepare的有component路由是不需要数据独立提前加载的其它页面。
 //import注意! 首字母?大小写不敏感的，tsx和ts被认为不能同名字的。
 //loadQuery() can NOT be called during render; must!called outside of a Component's render();
 //这是非render()执行的代码，history路由变化cb()回调函数来运行loadQuery()发起后端请求读数据;
 路由器params分解 都是要在?问号之前的URL字符串那一部分才是路由。路由器都不看?问号之后的URL部分。
 为保障纯粹性，路由组件不应当依赖于?问号之后的URL的参数配置来决定路由级别页面的布局。
 本函数在APP起点createRouter使用的，无法使用Hook;
*/
function routesWrapper(environment: Environment) {
    //没法用const {user, setUser} =useContext(UserContext);
  return  [
    {
      component: loadable(() => import('./AuthComp')),
      prepare: (params:any)=> {
        const AuthQuery = require('./__generated__/AuthCompQuery.graphql');
        //这个算0级别路由；底下的routes【】里面算是一级路由层次的。 fetchPolicy:避免真的发起后端请求，读前端缓存即可。
        return {
          rootQuery: loadQuery(
              environment as any,
              AuthQuery,
              {},
              { fetchPolicy: 'store-or-network' },
          ),
        };
      },
      routes: [
        {
          path: '/',
          exact: true,
          component: loadable(() => import('./Branding')),
        },
        {
          path: '/free/about',
          exact: true,
          component: loadable(() => import('./common/About')),
        },
        {
          path: '/free/test',
          exact: true,
          component: loadable(() => import('./comp/DragTest')),
        },
        {
          path: '/free/9sppt',
          exact: true,
          component: loadable(() => import('./9sppt/index3')),
        },
        {
          path: '/login',
          exact: true,
          component: loadable(() => import('./common/LoginPane')),
         },
        { ...deviceSecondRouter(environment) },
        { ...unitSecondRouter(environment) },
         ...taskSecondRouter(environment) ,
         ...inspectSecondRouter(environment) ,
        { ...searchSecondRouter(environment) },
         ...reportSecondRouter(environment) ,
         ...pipelineSecondRouter(environment) ,
        { ...maintenanceSecondRouter(environment) },
        ...agreementSecondRouter(environment),
        ...requestSecondRouter(environment) ,
          ...aideSecondRouter(environment),

      ],
    }
  ];
};


//自定义路由器的模式：
//SPA顶部层次的路由表
//export default routes;  包裹，注入graphQL环境
export default routesWrapper;
